﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>逻辑监控</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/lm.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		.cell{
			background-color: #F7F8FA !important; ;
		}
	</style>	
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu"><a href="../html/tfLibrary.html" >拓扑文件库</a></div>
			<div class="left_menu"><a href="../html/lapLibrary.html">逻辑预案库</a></div>
			<div class="left_menu"><a href="../html/bsk.html">部署库</a></div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curId" name="curId">
				<!-- 头部 -->
				<div class="top-bar">
					<div style="float:left;">逻辑监控<br>
						<span  class="text_color"  style="font-size: 13px;">Logical&nbsp;moniting</span>
					</div>
					<div class="b1">1.10以内<img src="../images/monitors/1.1.png"></div>
					<div class="b2">2.1000以内<img src="../images/monitors/2.1.png"></div>
					<div class="b3">3.10000以内<img src="../images/monitors/3.1.png"></div>
					<div class="b4">4.100000以内<img src="../images/monitors/4.1.png"></div>
					<div class="b5">5.1000000以内<img src="../images/monitors/5.1.png"></div>
				</div>
				<!-- 右侧 -->
				<div class="right pop-right">
						<div class="r0 app_text">属性栏</div>

						<div  class="lu expand" style="cursor:pointer;">
							物理链路
						</div>

						<div  class="attrA expand" style="cursor:pointer;">
							物理端口A属性
						</div>

						<div  class="attrB expand" style="cursor:pointer;">
							物理端口B属性
						</div>

						<div  class="infoA expand" style="cursor:pointer;">
							物理端口A统计信息
						</div>

						<div  class="infoB expand" style="cursor:pointer;">
							物理端口B统计信息
						</div>
					</div>
				<!-- 左侧 -->
				<div class="table-box">
					<!--<img src="../images/monitors/line.png" class="line">
					<img src="../images/monitors/line2.png" class="line2">-->
					<div class="card">
						<div class="card_top">
							<div class="card-bar1"><img src="../images/monitors/main.png" style="margin-right:10px;">主机</div>
							<div class="card-bar2">2个板卡</div>
						</div>
						<div class="cell shadow">
							<div class="cell-bar">
								<div class="cell-bar1"><img src="../images/monitors/card.png" style="margin-right:10px;">板卡</div>
								<div class="cell-bar2">4个单元</div>
							</div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>
							<div class="cp"><img class="box-img" src="../images/monitors/logical/2.png"></div>

						</div>
						
					</div>
					
				</div>
			</form>
	</div>
	<!--物理路由表弹窗-->
	<div class="pop_content2" id="showInfo2" style="display:none;">
		<div class="pop_block2">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">物理路由表信息查看</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tr>
						<td><div>设备ID</div></td>
						<td><div>目标ID</div></td>
						<td><div>入端口ID</div></td>
						<td><div>出端口ID</div></td>
						<td><div>出端口ID</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tbody class="popTbody2">
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
							<td>5</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<div class="shade" onclick="closeRight()"></div>
	</body>
	<script type="text/javascript">
	
	/*显示属性*/
	$(".box-img").on("click",function(){
	    $(".shade").show();
	    $(".right").show();
	    $(".right").animate({right:"0px"},500);
        $(".shade").animate({right:"190px"},500);
	});
	function closeRight(){
        $(".right").animate({right:"-190px"},500,function(){
            $(".right").hide();
		});
        $(".shade").animate({right:"0px"},500,function(){
            $(".shade").hide();
		});

	}
	/*主机板卡*/
	$(function(){
		var url="";
		var param="";
		/*$.post(url,param,"JSON").done(function(data){
			if(data){
				appendHtml(data);
			}
		});*/
		
var dataArr={
			id:1,
			card:{
					
				    id:1,
				  cell:[
							{
							id:1,			
							cp:	
								{
									id:1,
									name:'',
									remrk:'',
									icon:'../images/monitors/physical1/1.png'
								}																						
							},

							{
								id:2,			
								cp:	
									{
										id:1,
										icon:'../images/monitors/physical1/1.png'		
									}																					
							}
						]							
				}			
			};
			
		
		appendHtml(dataArr);
	});
	
	function appendHtml(data){
		//$(".table-box").empty();
		var html="";
		$.each(data,function(k,v){
			html+='<div class="card">';
			html+='<div class="card_top">';
			html+='<div class="card-bar1"><img src="../images/monitors/main.png">主机</div>';
			html+='<div class="card-bar2">2个板卡</div>';
			html+='</div>';
				$.each(data.card,function(k,v){
					html+='<div class="cell shadow">';
				html+='<div class="cell-bar">';
				html+='<div class="cell-bar1"><img src="../images/monitors/card.png" style="margin-right:10px;">板卡</div>';
				html+='<div class="cell-bar2">4个单元</div>';
				html+='</div>';
					$.each(data.card.cell,function(k,v){
						html+='<div class="cp"><img class="box-img" src="'+data.card.cell.cp.icon+'"></div>';
					});
				html+='</div>';
				html+='</div>';
				});
		});
	};
    /*子列表*/
    $(".lu.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>物理连路ID</td><td><div class="app_text">1</div></td></tr>';
            html+='<tr><td>链路主备</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>连路Down</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td>链路模式</td><td><div class="app_text">4x</div></td></tr>';
            html+='<tr><td>链路质量等级</td><td><div class="app_text">0</div></td></tr>';
            html+='</table>';
            html+='</div>';
            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".attrA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div  class="app_text">0</div></td></tr>';
            html+='<tr><td><div onclick="open_pop()" style="cursor:pointer;" class="app_text">查看路由表项</div></td><td></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".attrB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td><div onclick="open_pop()" style="cursor:pointer;"  class="app_text">查看路由表项</div></td><td></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".infoA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".infoB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
	/*物理路由弹窗*/
	function addDataPop(data){
		$(".pop_content2 .popTbody2").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td>'+v.no+'</td>';
			html += '<td>'+v.name+'</td>';
			html += '<td>'+v.type+'</td>';
			html += '<td>'+v.state+'</td>';
			html += '<td>'+v.note+'</td>';
			html += '</tr>';
		});
		$(".pop_content2 .popTbody2").append(html);
	}
	
	function open_pop(){
		/* var url = 'deploy_topology/get_by_id';
		var param = {id:id};
		$.post(url,param,"JSON").done(function(data){
			if(data&&data.length>0){
				addDataPop(data)
			}
		}); */
		 var dataArr = [];
		for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.no = i;
			dataJson.name = "OX8E_"+i;
			dataJson.type="string";
			dataJson.state = i;
			dataJson.note = "string";
			dataArr.push(dataJson);
		} 
		addDataPop(dataArr);
		$("#showInfo2").show();
		//tableSum();
	}
	function exit_pop2(){
		$("#showInfo2").hide();
	}



	function tableSum() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(20-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
	}
	
	$(function(){
		tableSum();
	});

	$(window).resize(function() {
		tableSum();
	});

	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
	</script>
</html>
